<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 情感沟通</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: #232323;
        }
        
        p {
            margin: 0;
        }
        
        .main {
            height: 100vh;
            width: 100%;
            max-width: 1488px;
            margin: 0 auto;
            background-color: #ededed;
            display: flex;
            flex-direction: column;
        }
        
        .chat {
            height: calc(100vh - 60px);
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            line-height: 1.5;
        }
        
        .chatt {
            display: flex;
            align-items: center;
            /* 垂直居中 */
            margin: 0px;
        }
        
        .chat::-webkit-scrollbar {
            width: 2px;
            background-color: #ededed;
        }
        
        .chat::-webkit-scrollbar-thumb {
            background-color: #c6c6c6;
            border-radius: 6px;
        }
        
        .actions {
            display: flex;
            align-items: center;
            height: 44px;
            padding: 8px;
            background-color: #f7f7f7;
            box-shadow: 0 -1px 2px rgba(200, 200, 200, 0.2);
        }
        
        input {
            border-radius: 6px;
            flex: 1;
            height: 34px;
            border: 1px solid white;
            padding: 0 8px;
            color: #232323;
            outline: none;
        }
        
        input:focus {
            border-color: white;
        }
        
        button {
            border-radius: 6px;
            height: 36px;
            min-width: 60px;
            border: none;
            margin-left: 10px;
            padding: 0 16px;
            background-color: #05c162;
            color: white;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #27d47e;
        }
        
        .message {
            margin: 10px;
            padding: 12px;
            border-radius: 6px;
            background-color: white;
            word-wrap: break-word;
            max-width: 80%;
            align-self: flex-start;
        }
        
        .sender {
            align-self: flex-end;
            background-color: #95ec69;
            color: #232323;
        }
        
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* margin-right: 10px; 头像与消息之间的间距 */
            margin-left: 1428px;
        }
        
        .avatarr {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* margin-right: 10px; 头像与消息之间的间距 */
            margin-left: 10px;
        }
        
        .chat-message-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        
        .chat-message-container .avatar {
            margin-right: 10px;
            /* 头像和消息之间的间距 */
            margin-left: 0;
            /* 重置之前的margin-left */
        }
        
        .chat-message-containerr {
            display: flex;
            align-items: center;
            /* 垂直居中 */
            margin: 10px;
        }
        
        .chat-message-containerr .avatarr {
            margin: 0;
        }
        
        .chat-message-containerr .botMessageContainer {
            margin: 0;
            /* 移除消息的外边距，因为它已经在容器内有了 */
        }
    </style>
</head>

<body>
    <div class="main">
        <h1 style="text-align: center;">AI 情感沟通</h1>
        <div class="chat">
            <div class="chatt">
                <img src="https://psc2.cf2.poecdn.net/assets/_next/static/media/assistant.b077c338.svg" alt="头像图标" class="avatarr" />
                <div class="message">哈喽，我是小范，有关情感方面问题都可以问我哦!</div>
            </div>
        </div>
    </div>
    <div class="actions">
        <input type="text" id="inputMessage" onkeydown="if(event.keyCode==13) send()">
        <button onclick="send()">发送</button>
    </div>
    </div>
    <script src="https://unpkg.com/marked@14.1.2/marked.min.js"></script>
    <script>
        // 获取输入框和聊天区域的DOM元素
        const input = document.getElementById('inputMessage');
        const chat = document.querySelector('.chat');

        // 发送消息的函数 
        function send() {
            const message = input.value.trim(); // 获取并去除用户输入的首尾空格
            if (!message) return; // 如果输入为空，则不执行后续操作
            const container = document.createElement('div');
            container.className = 'chat-message-container';
            // 创建新的消息容器并设置类名
            const newMessage = document.createElement('div');
            newMessage.className = 'message sender';
            newMessage.textContent = message;

            // 创建头像元素
            const avatar = document.createElement('img');
            avatar.src = '	http://store.zhentoo.com/uploads/20190108/88/88FE57B0EEAFw640h756.jpeg'; // 头像图片路径
            avatar.className = 'avatar'; // 添加头像的类名

            container.appendChild(newMessage);
            container.appendChild(avatar);
            chat.appendChild(container);
            // 滚动到聊天区域的底部
            chat.scrollTop = chat.scrollHeight;
            // 清空输入框 
            input.value = '';

            const containerr = document.createElement('div');
            containerr.className = 'chat-message-containerr';
            // 创建头像元素
            const avatarr = document.createElement('img');
            avatarr.src = '	https://psc2.cf2.poecdn.net/assets/_next/static/media/assistant.b077c338.svg'; // 头像图片路径
            avatarr.className = 'avatarr'; // 添加头像的类名

            // 创建并添加AI响应的消息容器
            const botMessageContainer = document.createElement('div');
            botMessageContainer.className = 'message';

            containerr.appendChild(avatarr);
            containerr.appendChild(botMessageContainer);
            chat.appendChild(containerr);

            fetch('/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'text/event-stream'
                },
                body: JSON.stringify({
                    message: message
                })
            }).then(response => {
                // 使用Stream API读取响应
                if (response.ok) {
                    const reader = response.body.getReader();
                    let currentMessage = '';

                    function read() {
                        reader.read().then(({
                            done,
                            value
                        }) => {
                            // 当读取完毕时，将消息设置到容器中
                            if (done) {
                                botMessageContainer.innerHTML = marked.parse(currentMessage);
                                chat.scrollTop = chat.scrollHeight;
                                return;
                            }
                            // 处理读取到的数据块
                            const textChunk = new TextDecoder("utf-8").decode(value);
                            currentMessage += textChunk;
                            // 实时更新消息到容器中（可能导致不必要的DOM操作）
                            botMessageContainer.innerHTML = marked.parse(currentMessage);
                            chat.scrollTop = chat.scrollHeight;
                            read(); // 继续读取
                        });
                    }
                    read();
                }
            });
        }
    </script>
</body>

</html>